<h1 id="top">组件通讯</h1>
<p>本烹饪宝典包含了常见的组件通讯场景，也就是让两个或多个组件之间共享信息的方法</p>

<a href="#parent-to-child">使用输入型绑定，把数据从父组件传到子组件</a><br/>
<a href="#parent-to-child-setter">通过 setter 拦截输入属性值的变化</a><br/>
<a href="#parent-to-child-on-changes">使用 ngOnChanges 拦截输入属性值的变化</a><br/>
<a href="#child-to-parent">父组件监听子组件的事件</a><br/>
<a href="#parent-to-child-local-var">父组件与子组件通过 本地变量 local variable 互动</a><br/>
<a href="#parent-to-view-child">父组件调用 ViewChild</a><br/>
<a href="#bidirectional-service">父组件和子组件通过服务来通讯</a><br/>

<div id="parent-to-child">
    <hero-parent></hero-parent>
</div>
<a href="#top" class="to-top">Back to Top</a>

<hr>
<div id="parent-to-child-setter">
    <name-parent></name-parent>
</div>
<a href="#top" class="to-top">Back to Top</a>

<hr>
<div id="parent-to-child-on-changes">
    <version-parent></version-parent>
</div>
<a href="#top" class="to-top">Back to Top</a>

<hr>
<div id="child-to-parent">
    <vote-taker></vote-taker>
</div>
<a href="#top" class="to-top">Back to Top</a>
<hr>

<div id="parent-to-child-local-var">
    <countdown-parent-lv></countdown-parent-lv>
</div>
<a href="#top" class="to-top">Back to Top</a>
<hr>

<div id="parent-to-view-child">
    <countdown-parent-vc></countdown-parent-vc>
</div>
<a href="#top" class="to-top">Back to Top</a>
<hr>

<div id="bidirectional-service">
    <mission-control></mission-control>
</div>
<a href="#top" class="to-top">Back to Top</a>
<hr>